<template>
   <div class="join-form">
        <div class="container1">
            <div class="container ">
                <img src="@/assets/index/index-process.png" alt="">
            </div>
        </div>
        <div class="container">
            <div class="form">
                <h1 class="form-number">{{this.count+700000}}</h1>
                <div class="form-container">
                    <img src="@/assets/index/index-form-titile1.png" alt="">
                    <div class="form-detail">
                        <div class="form-detail-left">
                            <div>
                                <input type="text" placeholder="您的姓名" v-model="name">
                                <input type="text" placeholder="您的联系电话" v-model="phone">
                            </div>
                            <div>
                                <select name="" id="">
                                    <option value="">3室</option>
                                    <option value="">2室</option>
                                    <option value="">1室</option>
                                </select>
                                <select name="" id="">
                                    <option value="">2厅</option>
                                    <option value="">1厅</option>
                                    <option value="">3厅</option>
                                </select>
                                <select name="" id="">
                                    <option value="">2卫</option>
                                    <option value="">1卫</option>
                                    <option value="">3卫</option>
                                </select>
                                <input type="text" placeholder="您的房屋面积">
                            </div>
                            
                        </div>
                        <img 
                        @click="submit()"
                        src="@/assets/index/index-submit1.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="container jump">
            <a 
            v-for="item of list" 
            :key="item.id"
            :href="item.url"
            target="_blank"
            ><img :src="item.img.url" alt=""></a>

            <!-- <a ><img src="@/assets/index/index-junp2.png" alt=""></a>
            <a ><img src="@/assets/index/index-junp3.png" alt=""></a> -->
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'JoinForm',
  data () {
    return {
        id:7,
        list:[],
        count:'',
        name:'',
        phone:'',
        local:'',
        message:'',
        description:'官网中间报名'
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    this.init()
    　 
  },
  distroyed: function () {

　　    

    },
  methods: {
        init(){
            this.getJoincount();
            this.getInfo();
        },
         getInfo(){
            // console.log(this.baseUrl)
            axios.get(this.baseUrl+'banner/'+this.id,
                    )
            .then(this.getInfoSucc)
        },
        getInfoSucc(response){
            // console.log(response)
            this.list = response.data.items
        },

        getJoincount(){           
             axios.get(this.baseUrl+'cms/getCount')
            .then(this.getJoincountSucc)
        },
        getJoincountSucc(response){
            // console.log(response)
            this.count = response.data
        },
        submit(){
            this.sendForm();
        },
        sendForm (){
            axios.get(this.baseUrl+'cms/joinAdd',
            {
                params:{
                    username:this.name,
                    phone:this.phone,
                    message:this.message,
                    description:this.description,
                    local:this.local
                }
            })
            .then(this.sendSucc)
        },
        sendSucc(response){
            //    console.log(response)
            const h = this.$createElement;
            if(response.data.errno===0){

                
                this.$notify({
                    title: '成功提醒',
                    type: 'success',
                    message: h('i', { style: 'color: teal'}, '留言成功，稍后客服会给你回复，请耐心等待')
                });
                this.getJoincount();

            }else if(response.data.errno===1){
                
                this.$notify.error({
                    title: '错误提醒',
                    message: h('i', { style: 'color: teal'}, '该手机号已提交过留言，请等待客服回复')
                });
            }
        }
        
        
   
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.join-form
    background #f0f1f2
.container1
    background white
.container
    container()   
.form 
    margin-top 50px
    width 100%
    background url('~@/assets/index/index-formbg.png')
    height 240px
    position relative
    .form-number
        position absolute
        left 1012px
        top 100px
        font-size 49px
        color #00a6ba
        width 165px
        text-align center
    .form-container
        width 720px
        margin 0 0 0 260px
.form-detail
    overflow hidden
    .form-detail-left
        float left 
        width 590px
.form-detail-left>div+div
    margin-top 10px
.form-detail-left input
    width 289px
    height 48px
    border 1px solid #a0a0a0
    text-indent 10px
.form-detail-left select 
    width 88px
    height 48px
    border 1px solid #a0a0a0
    text-indent 10px
    
.form-detail-left select+select
    margin-left 10px
.form-detail>img
    float right
.jump>a
    float left
    margin-top 30px
    margin-bottom 50px
.jump>a+a
    margin-left 30px
</style>
